<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
</style>

<body>
    <canvas id="canvas"></canvas>
</body>
<script>
    const canvas = document.getElementById('canvas')
    canvas.width = window.innerWidth - 10
    canvas.height = window.innerHeight - 10
    const ctx = canvas.getContext('2d', {
        willReadFrequently: true
    })
    const points = []

    class Point {
        constructor(x, y) {
            this.x = x;
            this.y = y;
        }
        draw() {
            ctx.beginPath()
            ctx.arc(this.x, this.y, 3, 0, 2 * Math.PI)
            ctx.strokeStyle = '#000'
            ctx.fillStyle = '#000'
            ctx.stroke()
            ctx.fill()
        }
    }

    function getRandomPointOnCircle(x, y, radius) {
        const angle = Math.random() * Math.PI * 2;
        const newX = x + radius * Math.cos(angle);
        const newY = y + radius * Math.sin(angle);
        return { x: newX, y: newY };
    }

    function drawAllPoint() {
        for (let i = 0; i < 100; i++) {
            const { x, y } = getRandomPointOnCircle(canvas.width / 2, canvas.height / 2, 400);
            const point = new Point(x, y)
            point.draw()
            points.push(point)
        }
    }


    function getDateTime() {
        return new Date().toLocaleTimeString('zh-CN');
    }

    function drawText() {
        ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)
        ctx.fillStyle = 'rgba(240,240,240,0.1)'
        ctx.fillStyle = '#000'
        ctx.font = "50px fangsong"
        ctx.fillText(getDateTime(), (canvas.width - 50) / 2, (canvas.height - 50) / 2)
        const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height)
        requestAnimationFrame(drawText)
    }

    drawAllPoint()
    function changePointPos() {
        ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)

        points.forEach(item => {
            const diffX = 500 - item.x
            const diffY = 500 - item.y
            item.x += diffX / 20
            item.y += diffY / 20
            if(parseInt(item.x) == 300 && parseInt(item.y) === 500){
                return
            }
            item.draw()
        })
        requestAnimationFrame(changePointPos)
    }
    // drawText()
    changePointPos()

</script>

</html>